<template>
    <view class="content">
        <image src="../../static/image/index_bg.png" class="index-bg"></image>
        <u-navbar :background="background" :border-bottom="false" :immersive="true" :is-back="false">
            <view class="head">
                <view class="head-left" @click="toPage('/pages/index/map')">
                    <image src="../../static/icon/add_04.png" class="add-04"></image>
                    <view class="head-add">地图</view>
                </view>
                <image src="../../static/icon/logo_01.png" class="logo-01"></image>
            </view>
        </u-navbar>
        <!-- 搜索 -->
        <view class="search" :style="{paddingTop: statusBar + 50 + 'px'}">
            <u-search :show-action="false" shape="round" placeholder="请输入项目名称" bg-color="#fff" disabled
                @click="toPage('/pages/index/floor-list')"></u-search>
        </view>
        
        <view class="top">
            <!-- 轮播 -->
            <u-swiper :list="data.rotation_image" height="315" interval="5000" duration="700" border-radius="10" indicator-pos="bottomCenter" @click="toGuangGao($event, data.rotation_image)"></u-swiper>
            <!-- 导航 -->
            <view class="nav">
                <view class="nav-item" @click="toPage('/pages/index/floor-list?type=0')">
                    <image src="../../static/image/index_01.png" class="nav-icon"></image>
                    <view class="nav-tit">全部楼盘</view>
                </view>
                <view class="nav-item" @click="toPage('/pages/index/floor-list?type=1')">
                    <image src="../../static/image/index_02.png" class="nav-icon"></image>
                    <image src="../../static/icon/new.png" class="nav-new"></image>
                    <view class="nav-tit">新品加推</view>
                </view>
                <view class="nav-item" @click="toPage('/pages/index/floor-list?type=2')">
                    <image src="../../static/image/index_03.png" class="nav-icon"></image>
                    <view class="nav-tit">其他楼盘</view>
                </view>
                <view class="nav-item" @click.stop="toReport('')">
                    <image src="../../static/image/index_04.png" class="nav-icon"></image>
                    <view class="nav-tit">报备客户</view>
                </view>
            </view>
        </view>
        
        <!-- 平台公告 -->
        <view class="notice-box" v-if="data.notice && data.notice.length > 0">
            <view class="notice">
                <view class="u-flex u-row-between u-col-center">
                    <image src="../../static/image/index_05.png" class="index-05"></image>
                    <view class="notice-more" @click="toPage('/pages/notice/notice')">查更多</view>
                </view>
                <swiper class="swiper" display-multiple-items="1" circular :vertical="true" :autoplay="true" interval="6000" duration="300">
                    <swiper-item class="swiper-item" v-for="(item, index) in data.notice" :key="index">
                        <view class="n-text" @click="toNotice(item)">
                            <view class="line"></view>
                            <view class="n-title">{{item.title}}</view>
                            <view class="n-time">{{item.time}}</view>
                            <!-- <view class="n-new" v-if="index == 0">新</view> -->
                        </view>
                    </swiper-item>
                </swiper>
                
                <!-- <u-notice-bar type="none" mode="vertical" :volume-icon="false" :list="noticeList"
                    is-circular="false" @click="toDetails(data.notice, $event)"></u-notice-bar> -->
            </view>
        </view>
        
        <!-- 热销楼盘 -->
        <view class="wrapper" v-if="data.properties && data.properties.length > 0">
            <view class="hot">
                <view class="hot-tit">热销楼盘</view>
                <view class="u-flex" @click="toPage('/pages/index/floor-list')">
                    <view class="hot-more">查看更多</view>
                    <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                </view>
            </view>
            <view class="item" v-for="(item, index) in data.properties" :key="index" 
                @click="toPage('/pages/index/floor-details?id=' + item.id)">
                <image :src="item.image" class="del-09"></image>
                <view class="rank">
                    <image src="../../static/image/index_06.png" class="index-06"></image>
                    <view class="rank-num">{{item.top}}</view>
                </view>
                <view>
                    <view class="u-flex u-row-between u-col-center">
                        <view>
                            <view class="name">{{item.name}}</view>
                            <view class="area">{{item.region_name}} · {{item.unit_price}}元/m²</view>
                        </view>
                        <view class="baobei" @click.stop="toReport(item)">报备</view>
                    </view>
                    <view class="price">
                        <!-- <view class="u-p-r-12">
                            <text class="p-l">{{item.commission_price}}</text>
                            <text>/套佣金</text>
                        </view> -->
                        <view class="plan">{{item.commission_num}}个方案</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#29b0ed" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBar: 0,
            background: { backgroundColor: 'rgba(255,255,255,0)' },
            current: 0, //底部导航索引
            tab_list: [
                {
                    iconPath: "/static/icon/tab_01.png",
                    selectedIconPath: "/static/icon/tab_01.png",
                    text: '',
                    pagePath: "/pages/tabbar/index",
                    customIcon: false
                },{
                    iconPath: "/static/icon/tab_03.png",
                    selectedIconPath: "/static/icon/tab_02.png",
                    text: '客户',
                    customIcon: false,
                    pagePath: "/pages/tabbar/kehu"
                },{
                    iconPath: "/static/icon/tab_05.png",
                    selectedIconPath: "/static/icon/tab_04.png",
                    text: '消息',
                    customIcon: false,
                    pagePath: "/pages/tabbar/news"
                },{
                    iconPath: "/static/icon/tab_07.png",
                    selectedIconPath: "/static/icon/tab_06.png",
                    text: '微聊',
                    customIcon: false,
                    pagePath: "/pages/tabbar/wechat"
                },{
                    iconPath: "/static/icon/tab_09.png",
                    selectedIconPath: "/static/icon/tab_08.png",
                    text: '我的',
                    customIcon: false,
                    pagePath: "/pages/tabbar/mine"
                }
            ],
            
            data: {},
            keyword: '',
            tts: '',
            info: {},
        };
    },
    onLoad() {
        let _this = this;
        //状态栏高度
        uni.getSystemInfo({
        	success: function(res) {
        		_this.statusBar = res.statusBarHeight;
        	}
        });
        // this.$getLocation((latitude,longitude) => {
        //     console.log('000',latitude, longitude)
        //     // getApp().globalData.latitude = latitude
        //     // getApp().globalData.longitude = longitude
        // })
        
    },
    onShow() {
		var _this = this
		
        if (this.$getSync('userToken')) {
            this.getInfo()
        }
        this.getIndexDate()
		
		// #ifdef APP-PLUS
		// 语音合成
		_this.tts = uni.requireNativePlugin('nrb-tts-plugin');
		_this.tts && _this.tts.init({ lang: 'ZH', country: 'CN' }, res => {
		    if (res.success == 0) {
		        console.log('初始化TTS成功', res);
		    }
		});
		
		// 极光推送
		if (uni.getStorageSync('uid')) {
		    console.log('000000')
		    const jyJPush = uni.requireNativePlugin('JY-JPush');
		    
		    // 监听消息推送事件 
			jyJPush.addJYJPushReceiveNotificationListener(result => {
				let type = ''
				if (uni.getSystemInfoSync().platform == 'android') {
					console.log('android--Receive', JSON.parse(result.notificationExtras).type);
					type = JSON.parse(result.notificationExtras).type
					
				} else if (uni.getSystemInfoSync().platform == 'ios') {
					console.log('ios--Receive', result);
					type = result.type
					
				}
				
			    if (type == 1) {
			        uni.$emit('KEHU')
			        _this.tts && _this.tts.speak('您有新的报备信息', {}, e => {})
			    	
			    } else if (type == 2) {
			        uni.$emit('YJXX')
			        _this.tts && _this.tts.speak('您有新的佣金信息', {}, e => {})
			    	
			    } else if (type == 3) {
			        uni.$emit('DHFXX')
			        _this.tts && _this.tts.speak('您有新的待回访信息', {}, e => {})
			    	
			    } else if (type == 4) {
			        uni.$emit('WECHAT')
			        _this.tts && _this.tts.speak('您有新的微聊信息', {}, e => {})
			    	
			    } else if (type == 5) {
			        uni.$emit('RYSHXX')
			        _this.tts && _this.tts.speak('您有新的人员审核信息', {}, e => {})
			    	
			    } else if (type == 6) {
			        uni.$emit('NEWS')
			        _this.tts && _this.tts.speak('您有新消息', {}, e => {})
			    	
			    } else if (type == 7) {
			        uni.$emit('TEST_SH')
			        _this.tts && _this.tts.speak('您有新的试题审核信息', {}, e => {})
			    	
			    } else if (type == 8) {
			        uni.$emit('HIT_CARD')
			        _this.tts && _this.tts.speak('请及时打卡', {}, e => {})
			    	
			    } else if (type == 9) {
			        uni.$emit('ITEM_BAOBEI')
			        _this.tts && _this.tts.speak('您有新的项目报备信息', {}, e => {})
			    	
			    } else if (type == 10) {
			        uni.$emit('ITEM_BAOBEI')
			        _this.tts && _this.tts.speak('您有新的项目报备信息未审核', {}, e => {})
			    	
			    }
			});
			
		    //监听推送消息 点击事件
		    jyJPush.addJYJPushReceiveOpenNotificationListener(result => {
				let opentype = ''
				if (uni.getSystemInfoSync().platform == 'android') {
					console.log('android--ReceiveOpen', JSON.parse(result.notificationExtras).type);
					opentype = JSON.parse(result.notificationExtras).type
					
				} else if (uni.getSystemInfoSync().platform == 'ios') {
					console.log('ios--ReceiveOpen', result);
					opentype = result.type
					
				}
				
		        if (opentype == 1) {
		            uni.switchTab({
		                url: '/pages/tabbar/kehu'
		            })
					
		        } else if (opentype == 2) {
					uni.navigateTo({
					    url: '/mine/pages/record/commission'
					})
		            
		        } else if (opentype == 3) {
					uni.navigateTo({
					    url: '/mine/pages/record/follow'
					})
		            
		        } else if (opentype == 4) {
					uni.switchTab({
					    url: '/pages/tabbar/wechat'
					})
		            
		        } else if (opentype == 5) {
					uni.switchTab({
					    url: '/pages/tabbar/mine'
					})
		            
		        } else if (opentype == 6) {
					uni.switchTab({
					    url: '/pages/tabbar/news'
					})
		            
		        } else if (opentype == 7) {
					uni.navigateTo({
					    url: '/staff/pages/opex-commissioner/opex-commissioner'
					})
		            
		        } else if (opentype == 8) {
					uni.switchTab({
					    url: '/pages/tabbar/mine'
					})
		            
		        } else if (opentype == 9) {
					uni.navigateTo({
					    url: '/staff/pages/shopowner/project-report'
					})
		            
		        } else if (opentype == 10) {
		            uni.navigateTo({
		                url: '/staff/pages/shopowner/project-report'
		            })
					
		        }
		    });
		}
		// #endif
    },
    methods: {
        // 获取个人信息
        getInfo() {
            this.$ajax('person_detail', {
                user_token: this.$getSync('userToken'),
            }).then(ret => {
                if (ret.success == 1000) {
                    this.info = ret.detail
                } else {
                    this.$toast(ret.msg);
                }
            });
        },
        
        // 报备
        toReport(item) {
            if (!this.$getSync('userToken')) {
                this.$gTo('/pages/login/login')
            } else {
                // 0未认证 1待审核 2通过 3驳回
                if (this.info && this.info.status == 0) {
                    uni.showModal({
                    	title: '温馨提示',
                    	content: '当前账号未认证，立即认证？',
                    	success: (res) => {
                    		if (res.confirm) {
                    			this.$gTo('/pages/login/real-name')
                    		} else if (res.cancel) {
                    			
                    		}
                    	}
                    });
                } else if (this.info && this.info.status == 3) {
                    this.$gTo('/pages/login/fail?content=' + this.info.reason)
                } else if (this.info && this.info.status == 1) {
                    this.$toast('账号审核中...');
                    return
                } else {
                    if (item) {
                        // this.$gTo('/pages/index/report?nitem=' + encodeURIComponent(JSON.stringify(item)))
                        this.$gTo('/pages/index/report?nitem=' + JSON.stringify(item))
                    } else {
                        this.$gTo('/pages/index/report')
                    }
                }
            }
        },
        // 公告
        toNotice(item){
            if (!this.$getSync('userToken')) {
                this.$gTo('/pages/login/login')
            } else {
                this.$gTo('/pages/notice/details?id=' + item.id)
            }
        },
        // 跳页
        toPage(url) {
            if (!this.$getSync('userToken')) {
                this.$gTo('/pages/login/login')
            } else {
                this.$gTo(url)
            }
        },
        
        // 轮播图跳转
        toGuangGao(e, array) {
            if (!uni.getStorageSync('userToken')) {
                this.$gTo('/pages/login/login')
            } else {
                console.log(array[e].link_id)
                if (array[e].link_id) {
                    this.$gTo('/pages/index/floor-details?id=' + array[e].link_id)
                }
            }
        },
        // 获取首页数据
        getIndexDate() {
            this.$ajax('index', {
                user_token: this.$getSync('userToken'),
            }).then(ret => {
                if (ret.success == 1000) {
                    this.data = ret.detail
                    if (this.data.unread > 0) {
                        uni.showModal({
                        	title: '温馨提示',
                        	content: '您有新的公告消息未查看，请立即查看',
                        	success: (res) => {
                        		if (res.confirm) {
                        			this.$gTo('/pages/notice/notice')
                        		} else if (res.cancel) {
                        			
                        		}
                        	}
                        });
                    }
                } else {
                    this.$toast(ret.msg);
                }
            });
        },
        
        //切换底部导航
        tabbarChange(e) {
        	this.current = e;
        },
        
        onPageScroll: function(e) {
        	//nvue暂不支持滚动监听，可用bindingx代替
        	// console.log("滚动距离为：" + e.scrollTop);
        	let a = e.scrollTop * 0.05;
        	if (a > 1) {
        		a = 1;
        	}
        	if (e.scrollTop == 0) {
        		this.background.backgroundColor = 'rgba(49,153,245,0)';
        	} else {
        		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
        	}
        },
    }
};
</script>

<style>
    /* .u-tabbar__content__circle{
        margin-bottom: -60rpx !important;
    }
    .u-tabbar__content__circle__border{
        background-color: rgba(255,255,255,0) !important;
    } */
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
        margin-top: -20rpx;
    }
    
</style>

<style lang="scss">
    
    .swiper{
        height: 50rpx !important;
    }
    // .swiper-item{
    //     height: 50rpx !important;
    //     overflow: hidden;
    // }
    
    
    
    
    page{
        background-color: #fff;
    }
    .index-bg{
        width: 750rpx;
        height: 310rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .head{
        width: 100vw;
        padding: 0 30rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .head-left{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .head-add{
        width: 210rpx;
        font-size: 28rpx;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .add-04{
        width: 29rpx;
        height: 33rpx;
        margin-right: 10rpx;
    }
    .logo-01{
        width: 186rpx; 
        height: 59rpx;
    }
    
    .search{
        padding: 0 25rpx 25rpx;
    }
    
    
    .top{
        background-color: #fff;
        border-radius: 25rpx 25rpx 0 0;
        padding: 25rpx 20rpx 0;
    }
    .nav{
        padding-top: 35rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    .nav-item{
        width: 23.5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-bottom: 40rpx;
    }
    .nav-icon{
        width: 131rpx;
        height: 86rpx;
    }
    .nav-new{
        width: 36rpx;
        height: 28rpx;
        position: absolute;
        top: -10rpx;
        right: 4rpx;
    }
    .nav-tit{
        font-size: 26rpx;
        font-weight: bold;
        padding-top: 15rpx;
        width: 23vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }
    
    
    .notice-box{
        background: linear-gradient(to top, #fff, #f3f4f9);
        border-radius: 25rpx 25rpx 0 0;
        padding: 25rpx;
    }
    .notice{
        background-color: #fff;
        border-radius: 25rpx;
        padding: 20rpx;
    }
    .index-05{
        width: 142rpx;
        height: 39rpx;
    }
    .notice-more{
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        color: #fff;
        background-color: #00a1e9;
        border-radius: 50rpx;
    }
    .n-text{
        padding: 10rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .line{
        width: 6rpx;
        height: 6rpx;
        background-color: #6f6f6f;
        border-radius: 50%;
        margin-right: 10rpx;
    }
    .n-title{
        max-width: 490rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 24rpx;
        color: #5a5a5a;
    }
    .n-time{
        font-size: 24rpx;
        color: #b9b9b9;
        padding: 0 10rpx 0 15rpx;
    }
    .n-new{
        font-size: 18rpx;
        line-height: 1;
        color: #fff;
        padding: 5rpx;
        background-color: #fe6155;
        border-radius: 6rpx;
    }
    
    
    .wrapper{
        padding: 30rpx 20rpx;
    }
    .hot{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .hot-tit{
        font-size: 34rpx;
        font-weight: bold;
    }
    .hot-more{
        font-size: 24rpx;
        color: #909090;
        padding-right: 10rpx;
    }
    .arrow-r-01{
        width: 8rpx;
        height: 15rpx;
    }
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding-bottom: 45rpx;
    }
    .rank{
        position: absolute;
        top: -15rpx;
        left: 2rpx;
    }
    .index-06{
        width: 53rpx;
        height: 62rpx;
    }
    .rank-num{
        font-size: 18rpx;
        font-weight: bold;
        line-height: 1;
        color: #fff;
        position: absolute;
        bottom: 8rpx;
        left: 27rpx;
        transform: translateX(-50%);
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 360rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area{
        padding: 15rpx 0;
        font-size: 24rpx;
        width: 360rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .baobei{
        padding: 15rpx 30rpx;
        font-size: 27rpx;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 15rpx;
    }
    .price{
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .p-l{
        color: #fe3c3c;
        font-size: 36rpx;
        font-weight: bold;
    }
    .p-l-r{
        color: #fe3c3c;
        padding: 0 5rpx;
    }
    .plan{
        color: #5f8fbe;
        font-size: 23rpx;
        line-height: 1;
        padding: 4rpx 13rpx;
        border: 2rpx solid #5f8fbe;
        border-radius: 5rpx;
    }
    
    
</style>
